<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="X-UA-Compatible" content="IE=5" >
<meta http-equiv="X-UA-Compatible" content="IE=7/8/9/10" >
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7/8/9" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" >
<script type="text/javascript">
	 if(!-[1,] && document.documentMode == '5'){
    alert('\u60A8\u7684\u6D4F\u89C8\u5668\u7248\u672C\u6E32\u67D3\u6A21\u5F0F\u4E0D\u6B63\u786E\uFF0C\u8BF7\u4F7F\u7528360\u6216\u8C37\u6B4C\u7B49\u6D4F\u89C8\u5668\uFF0C\u6216\u6253800800\u627E IT \u5E2E\u4F60\u628A\u6D4F\u89C8\u5668\u7684\u602A\u5F02\u6E32\u67D3\u6A21\u5F0F\u6539\u4E3A\u6807\u51C6\u6E32\u67D3\u6A21\u5F0F');
 }
</script>

<title>平台管理-成本</title>

<link type="text/css" rel="stylesheet" href="./css/common.css" />
<link type="text/css" rel="stylesheet" href="./css/plat.css" />
<link type="text/css" rel="stylesheet" href="./css/fontCss/font-awesome.min.css" />

</head>

<body>

<div class="container">
	
	<div class="header clearfix">
		<div class="headerLogo fl"></div>

		<ul class="headerList fr">
			<li><a href="#">资源管理</a></li>
			<li><a href="#">平台管理</a></li>
			<li><a href="#">用户admin</a></li>
		</ul>
	</div><!-- end of header -->

	<div class="content clearfix">
		<div class="menus">
			<ul class="menusCont">
				<li>
					<a href="#" class="menusCont_a">
						<i class="fa fa-coffee"></i>概况
						<i class="fa fa-caret-right fr"></i>
					</a>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-cloud"></i>云主机
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">实例</a>
						<a href="#">主机快照</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-database"></i>云硬盘
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">卷</a>
						<a href="#">硬盘快照</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-sitemap"></i>云网络
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">内部网络</a>
						<a href="#">内部FIP</a>
						<a href="#">路由</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-shield"></i>防火墙
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">防火墙</a>
						<a href="#">防火墙策略</a>
						<a href="#">防火墙规则</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-cog"></i>安全
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">密钥对</a>
						<a href="#">安全组</a>
						<a href="#">操作日志</a>
						<a href="#">通知列表</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-tasks"></i>负载均衡
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">资源池</a>
						<a href="#">监控</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-tasks"></i>自动伸缩
						<i class="fa fa-caret-right fr"></i>
					</a>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-tasks"></i>应用市场
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">环境</a>
						<a href="#">应用</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-bolt"></i>云监控
						<i class="fa fa-caret-right fr"></i>
					</a>
				</li>
			</ul>
		</div><!--end of menus -->

		<div class="main">
			<div class="w100">

				<div class="pC_menu">
					<span class="greenBtn-o"><a href="#">成本规模评估</a></span>
					<span class="grayBtn-o"><a href="#">费用支出明细</a></span>
				</div>

				<div class="pC_demo" style="display: none;">
					<div class="pC_cont">
						<div class="pC_contTit">
							<a href="#"><i class="fa fa-angle-down fa-lg" aria-hidden="true"></i></a>
							<span>现有云资源成本评估概览</span>
						</div>
						<div class="pC_contDet">
							<div class="pC_contTable clearfix">

								<div class="pC_coutLeft fl">
									<ul class="pC_count clearfix">
										<li>
											<div class="pC_countTop greenTop">
												<i class="fa fa-calculator" aria-hidden="true"></i>成本小计
											</div>
											<div class="pC_countBottom greenBottom">
												<i class="fa fa-jpy fa-lg" aria-hidden="true"></i>
												<span>484</span>
												<sub>/月</sub>
											</div>
											<i class="fa fa-plus fa-2x equal" aria-hidden="true"></i>
										</li>
										<li>
											<div class="pC_countTop grayTop">
												<i class="fa fa-server" aria-hidden="true"></i>实例
											</div>
											<div class="pC_countBottom grayBottom">
												<i class="fa fa-jpy fa-lg" aria-hidden="true"></i>
												<span>40</span>
												<sub>/月</sub>
											</div>
											<i class="fa fa-plus fa-2x equal" aria-hidden="true"></i>
										</li>
										<li>
											<div class="pC_countTop grayTop">
												<i class="fa fa-cloud" aria-hidden="true"></i>磁盘
											</div>
											<div class="pC_countBottom grayBottom">
												<i class="fa fa-jpy fa-lg" aria-hidden="true"></i>
												<span>4</span>
												<sub>/月</sub>
											</div>
										</li>
									</ul>
									<div class="pC_general pC_generalB">
										<h3>成本概述</h3>
										<p>依据现有资源规模，您需要平均每月支付<a href="#">483.66</a>元</p>
										<p>后付费昨日支出<a href="#">0.48</a>元，请注意账户余额元</p>
									</div>
								</div>

								<div class="pC_coutRight fl">
									<div id="pC_ring" style="width:88%;height:323px;"></div>
								</div>
							</div>
							<div class="pC_general pC_contSuggest">
								<h3>优化建议</h3>
								<h4>依据于最近10天实例的负载数据，为您做出如下优化建议：</h4>
								<p><i class="fa fa-long-arrow-up" aria-hidden="true"></i>实例“A_Win2008_HN13”网络规格可由固定带宽1Mbps调整至按流量计费带宽（峰值2Mbps），成本将减少22.34元/月。<a href="#">查看详情</a></p>
								<p><i class="fa fa-long-arrow-down" aria-hidden="true"></i>实例“T_VPC_Win2012_BJ”可由1核1G升级至1核2G，成本将增加40.00元/月。<a href="#">查看详情</a></p>
								<p><i class="fa fa-long-arrow-up" aria-hidden="true"></i>实例“A_Win2008_HN13”网络规格可由固定带宽1Mbps调整至按流量计费带宽（峰值2Mbps），成本将减少22.34元/月。<a href="#">查看详情</a></p>
								<p><i class="fa fa-long-arrow-up" aria-hidden="true"></i>实例“A_Win2008_HN13”网络规格可由固定带宽1Mbps调整至按流量计费带宽（峰值2Mbps），成本将减少22.34元/月。<a href="#">查看详情</a></p>
							</div>
						</div>
					</div>

					<div class="pC_cont">
						<div class="pC_contTit">
							<a href="#"><i class="fa fa-angle-down fa-lg" aria-hidden="true"></i></a>
							<span>现有云资源成本评估明细</span>
						</div>
						<div class="pC_contDet">
							<table class="pC_contTable">
								<thead>
									<tr>
										<th>名称</th>
										<th>计费类型</th>
										<th>实例<sub>（元/月）</sub></th>
										<th>磁盘<sub>（元/月）</sub></th>
										<th>带宽<sub>（元/月）</sub></th>
										<th>成本小计<sub>（元/月）</sub></th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td class="iconsLinux">A_Win2008_HN13</td>
										<td>包年包月</td>
										<td>73.00</td>
										<td>12.00</td>
										<td>3.00</td>
										<td>88.00</td>
									</tr>
									<tr>
										<td class="iconsWindow">A_Win2008_HN13</td>
										<td>包年包月</td>
										<td>73.00</td>
										<td>12.00</td>
										<td>3.00</td>
										<td>88.00</td>
									</tr>
									<tr>
										<td class="iconsWindow">A_Win2008_HN13</td>
										<td>包年包月</td>
										<td>73.00</td>
										<td>12.00</td>
										<td>3.00</td>
										<td>88.00</td>
									</tr>
									<tr>
										<td class="iconsLinux">A_Win2008_HN13</td>
										<td>包年包月</td>
										<td>73.00</td>
										<td>12.00</td>
										<td>3.00</td>
										<td>88.00</td>
									</tr>
								</tbody>
								<tfoot>
									<tr>
										<td></td>
										<td>合计</td>
										<td>1000.00</td>
										<td>1000.00</td>
										<td>1000.00</td>
										<td>1000.00</td>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>

				<div class="pC_demo" style="display: block;">
					<div class="pC_cont">
						
					</div>
				</div>
			</div>	
		</div><!-- end of main -->
	</div><!-- end of content -->

</div><!-- end of container -->

<script type="text/javascript" src="./js/jquery-1.7.2-min.js"></script>
<script type="text/javascript" src="./js/jq/jquery.goup.min.js"></script>
<script type="text/javascript" src="./js/jq/echarts.min.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript" src="./js/plat.js"></script>
<script type="text/javascript">
window.onload=function(){
	reSize();
}

$(window).resize(function(){
	reSize();	  				  
});

function reSize(){
	var window_W = $(window).width();
	var window_H = $(window).height();
	console.log(window_W,window_H);
	$('.menus').css('min-Height',window_H-55);
	/*$('.main').width(window_W-243).css('min-width','857px');*/
}


//左侧菜单
$('.menusCont li a.menusCont_a').on('click',function(){
    $(this)/*.addClass('menusCont_on')*/.next().slideToggle('fast');
});
$('.menusCont li a').on('click',function(){
    $('.menusCont li a').removeClass('menusCont_on');
    $(this).addClass('menusCont_on');
});
</script>

</body>
</html>